<template>
  <div class="datatable">
    <div class="datafilter" v-if="props.configure">
      <div class="super-editor-flex col-line">
        <div class="col-name">标题(关键词)</div>
        <div class="super-editor-flex">
          <div><el-input v-model="inputKeyword" placeholder="请输入关键词" @blur="inputBlur"
              @keyup.enter="addKeyword"></el-input></div>
          <div class="col-keyword-contain">
            <el-radio-group v-model="filterData.isAllKeywords" class="super-editor-flex">
              <el-radio-button label="0" border>任意一个</el-radio-button>
              <el-radio-button label="1" border>全部包含</el-radio-button>
            </el-radio-group>
          </div>
          <div class="super-editor-flex col-name-input">
            <el-tag v-for="keyword in filterData.titleKeywords" class="datafilter-keywords" size="large" closable
              @close="removeKeyword(keyword)">{{ keyword }}</el-tag>
          </div>
        </div>
      </div>
      <div class="super-editor-flex col-line">
        <div class="col-name">浏览量</div>
        <div class="super-editor-flex-between ">
          <span>最小值：</span><el-input-number v-model="filterData.viewCountMin" placeholder="最小值"></el-input-number>
          <!-- <span>-</span> -->
          <span class="count-max">最大值：</span><el-input-number v-model="filterData.viewCountMax"
            placeholder="最大值"></el-input-number>
        </div>
      </div>
      <div class="super-editor-flex col-line">
        <div class="col-name">评论量</div>
        <div class="super-editor-flex-between">
          <span>最小值：</span><el-input-number v-model="filterData.commentCountMin" placeholder="最小值"></el-input-number>
          <!-- <span> - </span> -->
          <span class="count-max">最大值：</span><el-input-number v-model="filterData.commentCountMax"
            placeholder="最大值"></el-input-number>
        </div>
      </div>
      <div class="super-editor-flex col-line">
        <div class="col-name">标签</div>
        <el-select v-model="filterData.tags" placeholder="请选择" @change="" multiple filterable remote
          :remote-method="searchTags" :loading="loading">
          <el-option v-for="tag in searchTagsList" :key="tag.id" :label="tag.name" :value="tag.name" />
        </el-select>
      </div>
      <div class="super-editor-flex col-line">
        <div class="col-name">起始日期</div>
        <div> <el-date-picker v-model="filterData.startTime" :default-time="defaultTime" format="YYYY-MM-DD"
            value-format="YYYY-MM-DD hh:mm:ss" type="date" placeholder="选择日期" :shortcuts="shortcuts" />
        </div>
      </div>

      <div class="super-editor-flex col-line">
        <div class="col-name">自动同步到笔记</div>
        <div class="">
          <el-radio-group v-model="filterData.auto2Note" class="super-editor-flex">
            <el-radio-button label="0" border>是</el-radio-button>
            <el-radio-button label="1" border>否</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="super-editor-flex col-line">
        <div class="col-name datatable-action"></div>
        <el-button type="primary" color="#222222" @click="search">搜索</el-button>
        <el-button type="primary" color="#222222" @click="reset">重置</el-button>
        <el-button type="primary" color="#222222" @click="saveConfig">保存配置</el-button>
      </div>
    </div>
    <el-table ref="datasetRef" row-key="id" :data="itemData" style="width: 100%" header-cell-class-name="table-header"
      :height="tableHeight()">
      <el-table-column fixed prop="site" label="站点" width="120" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="view" label="浏览量" width="80" />
      <el-table-column prop="comment" label="评论量" width="80" />
      <el-table-column prop="url" label="链接">
        <template #default="scope">
          <a :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="tags" label="标签" filter-placement="bottom-end" width="160">
        <template #default="scope">
          <el-tag>{{ scope.row.tags.map(item => { return item.name }).join(',') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="日期" column-key="created" width="160" />
    </el-table>
  </div>
</template>
  
<script setup>
import { ref, watch } from 'vue'
import { getDatasetItems, searchDatatags, itemsFilter, saveSubscribeConfig } from '@/api/dataset'
import { ElMessage } from 'element-plus';
const props = defineProps({
  dataset: {
    type: Number,
    default: 1,
  },
  configure: {
    type: Boolean,
    default: true
  },
  subscribe: {
    type: Number,
    default: 0
  }
})

watch(() => props.dataset,
  (newVal, oldVal) => {
    // console.log(props.subscribe,'dataset');
    reset()
    getDatasetItems(props.dataset).then(result => {
      itemData.value = result

    })
  },
)

const datasetRef = ref(null)

const itemData = ref([])
const tableHeight = () => {
  if (props.configure) {
    return window.innerHeight - 320
  } else {
    return window.innerHeight - 200
  }
}

getDatasetItems(props.dataset).then(result => {
  itemData.value = result

})


const filterData = ref({
  titleKeywords: [],//标题包含的关键词
  isAllKeywords: '0',
  viewCountMin: 0,
  viewCountMax: 100000,
  commentCountMin: 0,
  commentCountMax: 100000,
  tags: [],
  startTime: '',
  dataset: props.dataset,
  subscribe: props.subscribe,
  auto2Note: '0'
})

const defaultTime = new Date()

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const inputKeyword = ref('')
const removeKeyword = (keyword) => {
  filterData.value.titleKeywords = filterData.value.titleKeywords.filter(item => item !== keyword)
}
const inputBlur = () => {
  if (inputKeyword.value.length === 0) {
    return
  }
  filterData.value.titleKeywords.push(inputKeyword.value)
  inputKeyword.value = ''
}

const addKeyword = () => {
  if (inputKeyword.value.length === 0) {
    return
  }
  filterData.value.titleKeywords.push(inputKeyword.value)
  inputKeyword.value = ''

}

const loading = ref(false)
const searchTagsList = ref([])
const searchTags = (query) => {
  loading.value = true
  searchDatatags(props.dataset, query).then(result => {
    loading.value = false
    searchTagsList.value = result
  })
}


const search = () => {
  itemsFilter(filterData.value).then(result => {
    itemData.value = result
  })

  console.log(filterData.value, 'filterData');
}

const reset = () => {
  filterData.value = {
    titleKeywords: [],//标题包含的关键词
    isAllKeywords: '0',
    viewCountMin: 0,
    viewCountMax: 100000,
    commentCountMin: 0,
    commentCountMax: 100000,
    tags: [],
    startTime: '',
    dataset: props.dataset,
    subscribe: props.subscribe,
    auto2Note: '0'
  }
  inputKeyword.value = ''
}

const saveConfig = () => {
  saveSubscribeConfig(filterData.value).then(result =>{
    if(result.success){
      ElMessage.success('保存成功')
    }else{
      ElMessage.error('保存失败')
    }
    
  })
  console.log(filterData.value, 'filterData');
}

</script>
<style scoped>
a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

a,
a:hover {
  text-decoration: none;
  color: blue;
}


.datatable {
  padding: 10px 10px 0px 10px;
}

:deep(.el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right) {
  background-color: var(--supereditor-primary-item-color);
}

:deep(.el-table th.el-table__cell) {
  background-color: var(--supereditor-primary-item-color);
}

.datafilter {
  /* border-bottom: 1px solid pink; */
}


.col-name-input {
  gap: 5px;
  margin-left: 10px;
}

.count-max {
  margin-left: 10px;
}

.col-keyword-contain {
  margin: 0 10px;
}

.col-line {
  /* display: flex; */
  padding-bottom: 5px;
}

.col-name {
  font-weight: bold;
  width: 100px;
  height: 32px;
  /* margin-bottom: 5px; */
  /* background-color: var(--supereditor-primary-item-color); */
  line-height: 32px;
  margin-right: 10px;

}

.datatable-action {
  background-color: #fff;
}</style>
  